<template>
  <div class="wrap" id="wrap">
    <div class="logGet">
      <!-- 头部提示信息 -->
      <div class="logD logDtip">
        <p class="p1">登录</p>
      </div>
      <!-- 输入框 -->
      <div class="lgD">
        <input
          type="text"
          placeholder="输入用户名"
          v-model.trim="userInfo.userName"
        />
      </div>
      <div class="lgD">
        <input
          type="password"
          placeholder="输入用户密码"
          v-model.trim="userInfo.passWords"
        />
      </div>
      <div class="logC">
        <span class="loginTips" v-show="showTip">
          * 账号或者密码错误,请重新输入
        </span>
        <a><button @click="login">登 录</button></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      userInfo: {
        userName: '',
        passWords: ''
      },
      showTip: false
    }
  },
  methods: {
    login() {
      // 假设登陆成功，则跳转到 index 组件
      if (
        this.userInfo.userName == 'nanniwan' &&
        this.userInfo.passWords == 'nanniwan666'
      ) {
        this.$router.replace('/home')
      } else {
        this.showTip = true
      }
    }
  },
  watch: {
    userInfo: {
      handler: function(newvalue) {
        // console.log(newvalue)
        if (newvalue.userName === '' && newvalue.passWords === '') {
          this.showTip = false
        }
      },
      deep: true //deep置为true表示：对象中任一属性值发生变化，都会触发handler中的方法
    }
  }
}
</script>

<style scoped>
#wrap {
  /* height: 600px; */
  height: 100%;
  width: 100%;
  background: url('../assets/imgs/2020161431105934357.jpg') no-repeat center
    center;
  background-size: cover;
  position: relative;
}

#head {
  height: 120px;
  width: 100;
  background-color: #66cccc;
  text-align: center;
  position: relative;
}

#wrap .logGet {
  height: 408px;
  width: 368px;
  position: absolute;
  background-color: #ffffff;
  top: 100px;
  right: 15%;
}

.logC a button {
  width: 100%;
  height: 45px;
  background-color: #ee7700;
  border: none;
  color: white;
  font-size: 18px;
}

.logGet .logD.logDtip .p1 {
  display: inline-block;
  font-size: 28px;
  margin-top: 30px;
  width: 86%;
}

#wrap .logGet .logD.logDtip {
  width: 86%;
  border-bottom: 1px solid #ee7700;
  margin-bottom: 60px;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
}

.logGet .lgD img {
  position: absolute;
  top: 12px;
  left: 8px;
}

.logGet .lgD input {
  width: 100%;
  height: 42px;
  text-indent: 2.5rem;
}

#wrap .logGet .lgD {
  width: 86%;
  position: relative;
  margin-bottom: 30px;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
}

#wrap .logGet .logC {
  width: 86%;
  margin-top: 10px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

/* .title {
  font-family: '宋体';
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  height: 40px;
  width: 30%;
} */

.copyright {
  font-family: '宋体';
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 使用css3的transform来实现 */
  height: 60px;
  width: 40%;
  text-align: center;
}
.loginTips {
  color: red;
  font-size: 12px;
}
</style>
